<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i>{{l("create")}}</button>
</div>
<nz-table
  #basicTable
  nzBordered
  [nzLoading]="loading"
  [nzData]="dataSet"
  [nzShowPagination]="false"
  [nzScroll]="{x:'1000px'}">
  <thead>
  <tr>
    <th>{{l("serial_number")}}</th>
    <th>{{l("role_name")}}</th>
    <th>{{l("operation")}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data;let i =index">
    <td>{{i+1}}</td>
    <td>{{data.name}}</td>
    <td>
      <a (click)="showModal(data.id)">{{l("edit")}}</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a (click)="setPermissions(data.id)">{{l("accredit")}}</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"  [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">{{l("role_name")}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <input nz-input formControlName="name"  id="name" [(ngModel)]="role.name">
        <nz-form-explain *ngIf="validateForm.get('name').hasError('required')">{{l("please_enter_role_name")}}</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('name').hasError('maxlength')">{{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>


<app-change-permission-modal #changePermissionModal></app-change-permission-modal>
